<template>
  <div class="side-wrapper">
    <Userinfo :base="base" />

    <div class="list-wrapper">
      <Baseinfo :base="base" />

      <Contact :contact="contact" />

      <Hobby />

      <Wechat :contact="contact" />
    </div>
  </div>
</template>

<script>
import Userinfo from './userinfo'
import Baseinfo from './baseinfo'
import Contact from './contact'
import Hobby from './hobby'
import Wechat from './wechat'

export default {
  name: 'side-wrap',
  components: {
    Userinfo,
    Baseinfo,
    Contact,
    Hobby,
    Wechat,
  },
  props: {
    base: {
      type: Object,
      default() {
        return {
          name: '',
          avatar: '',
          summary: '',
          education: '',
          seniority: '',
        }
      },
    },
    contact: {
      type: Object,
      default() {
        return {
          phone: '',
          email: '',
          github: '',
          homepage: '',
          wechat: '',
        }
      },
    },
  },
}
</script>


<style lang="stylus">
@import '~@/assets/style/mixin.styl';

.side-wrapper
  background-color whitesmoke
  padding 20px 20px 0 20px

  .hero-box
    text-align center
    color #607d8b
    margin-bottom 30px
    h2
      margin 10px 0
      font-size 20px

    .img-wrapper
      width 160px
      height 160px
      border-radius 50%
      img
        width 150px
        height 150px
        border-radius 50%
        border 5px solid #fff
        transition transform 0.5s ease .5s

  .hero-info
    .edu-info
      display flex
      flex-wrap wrap
      span
        width 90px
      strong
        width calc(100% - 90px)

  .hero-hobby
    .flex-box
      display flex
      flex-wrap wrap
      justify-content flex-start
      align-items center
      .box-item
        width 50px
        display flex
        margin 0 10px 10px 0
        i
          display flex
          justify-content center
          align-items center
          border 1px solid #eee
          height 50px
          width 50px
          line-height 30px
          font-size 26px
          border-radius 2px
          transition all 0.6s ease

      .item-1
        &:hover
          i
            background-color #607d8b
            color #fff

      .item-2
        &:hover
          i
            background-color #607d8b
            color #fff
            border-radius 50%
      .item-3
        &:hover
          i
            background-color #607d8b
            color #fff
            border-radius 50%
            transform rotate(360deg)

      .item-4
        position relative
        width 50px
        height 50px
        overflow hidden
        .icon-swticondianying
          position absolute
          left 0
          top 0
        .icon-movie
          position absolute
          left 0
          top 100%
        &:hover
          .icon-swticondianying
            top -100%
          .icon-movie
            top 0

      .item-5
        &:hover
          i
            animation shake 1s

      .item-6
        position relative
        width 50px
        height 50px
        overflow hidden
        .taiqiu-1
          position absolute
          left 0
          top 0
          transition left,rotate 0.6s,0.6s ease,ease 0.6s,0.6s
        .taiqiu-2
          position absolute
          left 100%
          top 0
          transition left,rotate 0.6s,0.6s ease,ease 0.6s,0.6s
        &:hover
          .taiqiu-1
            left -100%
            transform rotate(180deg)
          .taiqiu-2
            left 0
            transform rotate(360deg)

      .item-7
        position relative
        width 50px
        height 50px
        overflow hidden
        .icon-Baseball
          position absolute
          left 0
          top 0
          transition left,rotate 0.6s,0.6s ease,ease 0.6s,0.6s
        .icon-Baseball-
          position absolute
          left 100%
          top 0
          transition left,rotate 0.6s,0.6s ease,ease 0.6s,0.6s
        &:hover
          .icon-Baseball
            left -100%
            transform rotate(180deg)
          .icon-Baseball-
            left 0

      .item-8
        position relative
        width 50px
        height 50px
        overflow hidden
        .icon-yuedujilu
          position absolute
          left 0
          top 0
        .icon-yuedureading19
          position absolute
          left 0
          top -100%
        &:hover
          .icon-yuedujilu
            top 100%
          .icon-yuedureading19
            top 0

  .hero-wechat
    padding-bottom 20px
    img
      width 180px
      height 180px
      position relative
      z-index 2
      transition all 0.4s ease

    dd
      width 220px
      height 220px
      margin 0 auto
      position relative
      overflow hidden
      &:hover
        img
          transform scale(1.1)
          transform-origin center

.circle-anime-wrapper
  position: relative
  width: 160px
  height: 160px
  margin: 0 auto
  overflow: hidden
  position: relative
  *
    box-sizing: content-box
  .wrapper
    width: 80px
    height: 160px
    position:absolute
    top: 0
    overflow: hidden
    .circle-progress
      width: 150px
      height: 150px
      border: 5px solid transparent
      border-radius: 50%
      position:absolute
      top: 0
      transform: rotate(-135deg)

  .right
    right: 0
    .right-circle
      border-top:5px solid #bad0d8
      border-right:5px solid #bad0d8
      right:0

  .left
    left: 0
    .left-circle
      border-bottom:5px solid #bad0d8
      border-left:5px solid #bad0d8
      left:0

  &:hover
    .right-circle
      animation: circle_progress_load_right .5s linear 1 alternate forwards

    .left-circle
      animation: circle_progress_load_left .5s linear 1 alternate forwards
    img
      transform: scale(1.2)

@keyframes circle_progress_load_right
  0%
    transform: rotate(-135deg)
  50%, 100%
    transform: rotate(45deg)

@keyframes circle_progress_load_left
  50%
    transform: rotate(-135deg)
  100%
    transform: rotate(45deg)


@keyframes shake
  0%, 100%
    transform: translateX(0)

  10%, 30%, 50%, 70%, 90%
    transform: translateX(-2px)

  20%, 40%, 60%, 80%
    transform: translateX(2px)
</style>
